// 使用hook先引入引入useState函数
import React, { useState } from 'react'

/*
useState是一个函数,它返回一个数组
调用useState返回一个数组,数组第一个元素是当前状态的state
第二个元素是一个函数,这个函数的作用就是去修改和设置我们的状态
*/

//函数式组件添加一个状态
export default function Hook1() {
    // 调用一个函数,传入参数,0是设置初始状态是0
    //const arr = useState(0);
    //const state = arr[0];
    //const setState = arr[1];
    //console.log(arr);

    //除了上述方法外还可解构赋值分别拿到两个对象
    // useState后面的括号是状态的初始值
    const [state, setState] = useState(20);
    // 如果要使用数组形式的state
    const [star, setStar] = useState(['1', '2', '3'])
    // 如果要使用对象类型的state
    const [people, setpeople] = useState({ name: 'xy', age: 12 })
    return (
        <div>
            <h1>{state}</h1>
            {/* 绑定事件回调函数 */}
            <button onClick={(e) => { setState(state + 1) }}>加了1</button>
            <ul>
                {
                    star.map((item, index) => {
                        return (
                            <li key={item}>{item}</li>
                        )
                    })
                }
            </ul>
            {/* 向数组内添加元素 */}
            <button onClick={e => { setStar([...star, '牛逼']) }}>加牛逼</button>
            <h2>{people.name}</h2>
        </div>
    );
}
